<script
	lang="ts"
	setup
>
import { tenantIdGet } from '@/api'
import RenderGender from '@/components/RenderGender.vue'
import type { OTenantIdGet } from '@/typed/response'
import { OTenantIdGetValue } from '@/typed/response.value'
import { renderMaybeNull } from '@/utils';
import { NAvatar } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { formatTime } from '@/utils'

interface IProps {
	show?: boolean;
	id: number;
	width?: number | string;
}

const emit = defineEmits(['update:show'])
const props = withDefaults(defineProps<IProps>(), {
	show: false,
	width: 500
})

const loading = ref(false)
const tenantDetail = ref<OTenantIdGet>({ ...OTenantIdGetValue })

watch(() => props.show, (val) => {
	if (val && props.id) {
		getAdminInfo(props.id)
	}
})

function onUpdateShow(show: boolean) {
	emit('update:show', show)
	if (!show) {
        tenantDetail.value = { ...OTenantIdGetValue }
	}
}

async function getAdminInfo(id: number) {
	loading.value = true
	try {
		const { code, data } = await tenantIdGet(id)
		console.log('sss:',data)
		if (code === 200 && data) {
            tenantDetail.value = data
		}
	} catch (error) {
		window.$message.error('获取租户信息失败')
	} finally {
		loading.value = false
	}
}

const statusText = computed(() => tenantDetail.value.status === 0 ? '正常' : '停用')
const statusType = computed(() => tenantDetail.value.status === 0 ? 'success' : 'error')
</script>

<template>
	<n-drawer
		:show="show"
		:width="width"
		close-on-esc
		@update:show="onUpdateShow"
	>
		<n-drawer-content closable>
			<template #header>
				<div class="drawerHeader">
					<n-avatar
						:size="100"
						:src="tenantDetail.avatar"
						round
					/>
					<div class="flex">
						<div class="info">
							<div class="name">租户名：{{ tenantDetail.tenantName }}</div>
							<div class="desc">手机号：{{ tenantDetail.phone || '-' }}</div>
							<div class="desc">邮箱：{{ tenantDetail.email || '-' }}</div>
						</div>
					</div>
				</div>
			</template>
			<n-spin :show="loading">
				<section>
					<h3 class="infoTitle">基本信息</h3>
					<div>
						<div class="infoItem">
							<div class="label">租户ID：</div>
							<div class="value">{{ tenantDetail.id || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">租户名称：</div>
							<div class="value">{{ tenantDetail.tenantName || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">社会信用代码：</div>
							<div class="value">{{ tenantDetail.socialCreditCode || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">法人：</div>
							<div class="value">{{ tenantDetail.legalPerson || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">账号状态：</div>
							<div class="value">
								<n-tag :type="statusType">{{ statusText }}</n-tag>
							</div>
						</div>
						<div class="infoItem">
							<div class="label">备注：</div>
							<div class="value">{{ tenantDetail.remark || '-' }}</div>
						</div>
					</div>
				</section>


				<section>
					<h3 class="infoTitle">其他信息</h3>
					<div>
						<div class="infoItem">
							<div class="label">创建人：</div>
							<div class="value">{{ tenantDetail.createBy || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">创建时间：</div>
							<div class="value">{{ tenantDetail.createTime ? formatTime(tenantDetail.createTime, 'YYYY-MM-DD HH:mm:ss') : '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">更新人：</div>
							<div class="value">{{ tenantDetail.updateBy || '-' }}</div>
						</div>
						<div class="infoItem">
							<div class="label">更新时间：</div>
							<div class="value">{{ tenantDetail.updateTime ? formatTime(tenantDetail.updateTime, 'YYYY-MM-DD HH:mm:ss') : '-' }}</div>
						</div>
					</div>
				</section>
			</n-spin>
		</n-drawer-content>
	</n-drawer>
</template>

<style
	lang="less"
	scoped
>
.drawerHeader {
	display: flex;
	align-items: stretch;

	:deep(.n-avatar) {
		flex-shrink: 0;
	}

	.flex {
		flex-grow: 1;
		margin-left: 20px;
		display: flex;
		align-items: center;
		width: 0;

		.info {
			width: 100%;
		}

		.name {
			font-size: 16px;
			font-weight: bold;
		}

		.desc {
			margin-top: 10px;
			font-size: 14px;
			color: var(--n-text-color-2);
		}
	}
}

.infoTitle {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}

.infoItem {
	display: flex;
	line-height: 1.5;
	margin-bottom: 16px;
	font-size: 14px;

	.label {
		width: 120px;
		flex-shrink: 0;
		color: var(--n-text-color-2);
	}

	.value {
		flex: 1;
		color: var(--n-text-color-1);
	}
}

section {
	margin-bottom: 24px;

	&:last-child {
		margin-bottom: 0;
	}
}
</style>
